<template>
  <div class="search">
    <van-config-provider :theme-vars="themeVars">
      <!-- 热门搜索 -->
      <div class="buttons">
        <van-cell value="热门搜索" class="cell" />
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >UI高级进阶课程</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >大数据学习</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >人工智能</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >职场英语</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >产品经理进阶课程</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >物理</van-button
        >
      </div>

      <!-- 历史记录 -->
      <div class="buttons_delete">
        <van-cell title="历史记录" class="cell">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="delete-o" class="delete-icon" @click="delete" />
          </template>
        </van-cell>
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >大数据</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >UI课程</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >Excel</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >Word</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >产品经理</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >小程序开发</van-button
        >
        <van-button
          color="#7e85e8"
          round="true"
          plain
          class="button"
          to="/search/relevant"
          >前端开发</van-button
        >
      </div>
    </van-config-provider>
  </div>
</template>

<script>
import { Cell, CellGroup } from 'vant'
export default {
  name: 'Search',
  data() {
    return {
      themeVars: {
        buttonDefaultHeight: '4vh',
      },
    }
  },
  methods: {
    delete() {},
  },
  components: {
    Cell,
    CellGroup,
  },
}
</script>

<style lang="less" scoped>
@import '@/style/index.less';
.delete-icon {
  font-size: 2.5vh;
  line-height: inherit;
  color: #ccc;
}
.buttons {
  padding: 2vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;

  .button {
    margin-bottom: 2vh;
  }
}
.buttons_delete {
  padding: 2vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;

  .button {
    margin-bottom: 2vh;
  }
}
.cell {
  margin-bottom: 1vh;
}
</style>
